<template>
  <div style="background: #e5e9f2">
      <div class="block" style="float: right; background: #e5e9f2">
        <el-button type="mini" style="margin-right: 1vw" @click="exportExcel"><i class="el-icon-download"></i></el-button>
        <label style="font-size: 20px; color: #000000;">筛选：</label>
        <el-select
          v-model="equipmentName"
          filterable
          allow-create
          placeholder="—请选择—"
          @change="makeParams"
          style="margin-right: 10px;width: 200px">
          <el-option :label="equipment" :value="equipment" v-for="equipment in equipmentNames" :key="equipment.id"></el-option>
        </el-select>
        <el-date-picker
          v-model="dateDuring"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期">
        </el-date-picker>
        <el-button style="margin: 0 20px" icon="el-icon-refresh" type="primary" @click="getData"/>
      </div>
        <el-table
          :data="tableData"
          lazy
          height="70vh"
          v-loading="loading">
<!--          <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>-->
<!--          <el-table-column  label="时间" prop="Time" width="250" align="center"></el-table-column>-->
          <template v-for="item in tableColumn">
            <el-table-column
              :key="item.prop"
              :prop="item.prop"
              :label="item.label"
              :width="item.width"
              show-overflow-tooltip
              align="center"
            ></el-table-column>
          </template>
        </el-table>
<!--    <el-pagination-->
<!--      style="margin-top: 10px;float: right"-->
<!--      :page-size="100"-->
<!--      @current-change="reloadPage"-->
<!--      layout="total, prev, pager, next, jumper"-->
<!--      :current-page.sync="currentPage"-->
<!--      :total=total />-->
  </div>
</template>

<script>
import request from '@/network/request'
import { baseURL } from '../../../../config/baseConfig'
export default {
  components: {
  },
  beforeMount () {
    this.getData()
  },
  data () {
    return {
      dialogData: {
        visibleFlag: false,
        dialogTitle: '新增',
        formType: 'add',
        editData: {}
      },
      equipmentNames: [],
      equipmentName: '',
      dateDuring: '',
      tableColumn: [],
      tableData: [],
      historyList: [],
      currentSignalId: '',
      loading: true
    }
  },
  created () {
    this.dateDuring = [new Date(), new Date()]
    request({
      url: baseURL + 'getAllSignalNameForFilter',
      method: 'get',
      params: {
        factory: this.$store.getters.getFactory
      }
    }).then(res => {
      this.historyList = res.data.data
      for (let i = 0; i < this.historyList.length; i++) {
        this.equipmentNames.push(this.historyList[i].signalName)
      }
    })
    this.equipmentName = this.equipmentNames[0]
    this.makeParams()
    this.getData()
    this.loading = false
  },
  methods: {
    makeParams () {
      // currentSignalId为当前选中的设备的id
      for (let i = 0; i < this.historyList.length; i++) {
        if (this.historyList[i].signalName === this.equipmentName) {
          this.currentSignalId = this.historyList[i].equipId
        }
      }
      console.log(this.currentSignalId)
    },
    exportExcel () {
      var starttime = this.TimeToString(this.dateDuring[0])
      var endTime = this.TimeToString(this.dateDuring[1])
      const params = {
        startTime: starttime,
        endTime: endTime,
        signalName: this.equipmentName,
        pageSize: this.pageSize,
        currentPage: this.currentPage,
        factory: this.$store.getters.getFactory
      }
      window.location.href = baseURL + '/exportTempExcel?signalName=' + params.signalName + '&startTime=' + params.startTime + '&endTime=' + params.endTime + '&factory=' + params.factory
    },
    TimeToString (date) {
      var str = ''
      var year = date.getFullYear()
      var month = date.getMonth() + 1
      var day = date.getDate()
      str = year + '-' + month + '-' + day
      return str
    },
    getData () {
      var starttime = this.TimeToString(this.dateDuring[0])
      var endTime = this.TimeToString(this.dateDuring[1])
      const params = {
        startTime: starttime,
        endTime: endTime,
        signalName: this.equipmentName,
        equipId: this.currentSignalId,
        pageSize: this.pageSize,
        currentPage: this.currentPage,
        factory: this.$store.getters.getFactory
      }
      request({
        method: 'post',
        url: '/searchByEquipNameAndTime',
        params: params
      }).then((res) => {
        if (res.data.code === 200 && res.data.message === 'SUCCESS') {
          this.loading = true
          this.tableData = res.data.data.tableData
          this.tableColumn = res.data.data.tableColumns
          // 对tableColumn进行排序，tableColumn的label通过下划线进行划分，第一个下划线前的为书柜号，第二个下划线前的为层数，第三个下划线前的为列数
          // 如果label划分长度为5，则按层数排序，层数相同则按列数排序
          // 如果label划分长度为3或4的，则放在最后, 但长度为3的放在长度为4的前面
          // 如果label划分长度为1，则放在最前
          this.tableColumn.sort((a, b) => {
            const aArr = a.label.split('_')
            const bArr = b.label.split('_')
            if (aArr.length === 1) {
              return -1
            } else if (bArr.length === 1) {
              return 1
            } else if (aArr.length === 3 || aArr.length === 4) {
              return 1
            } else if (bArr.length === 3 || bArr.length === 4) {
              return -1
            } else if (aArr.length === 5 && bArr.length === 5) {
              if (aArr[1][0] === bArr[1][0]) {
                if (aArr[2][0] === bArr[2][0]) {
                  return aArr[3][0] - bArr[3][0]
                } else {
                  return aArr[2][0] - bArr[2][0]
                }
              } else {
                return aArr[1][0] - bArr[1][0]
              }
            }
          })
          console.log('排序后', this.tableColumn)
          this.loading = false
        } else if (res.data.message !== 'SUCCESS') {
          this.$message.error(res.data.message)
        } else if (res.data.code === 400) {
          this.$message.error(res.message)
        } else {
          this.$message.error('获取温度失败!')
        }
      })
      console.log(this.dateDuring)
    },
    reloadPage (currentPage) {
      this.currentPage = currentPage
      this.getData()
    },
    closeDialog () {
      this.dialogData.visibleFlag = false
      this.getData()
    },
    timeChange () {
      // console.log(this.value2[0].getTime())
      // console.log(this.value2[1].getTime())
      // console.log(this.dateDuring)
      this.currentPage = 1
      this.getData()
    }
  }
}
</script>

<style scoped>
.el-table{
  width: 100%;
  height: 70vh;
  overflow: auto;
}
</style>
